<!doctype html>
<p>CSS's <span style="font-family: monospace">line-height</span> can make the links' line boxes overlap vertically.
SpatNav needs to handle these overlapping focusables.</p>

<p>This test looks a bit artificial because the Ahem font's "glyphs" are squares that fill the
entire line height. Real-life fonts don't; they have varying white space above/under the glyphs.
To reduce the white space, web developers may use <span style="font-family: monospace">line-height < font-size</span>
(which causes overlapping focusables...).</p>

<p>Test 1 (the red and blue links intersect the purple link below):</p>

<div style="font: 16px Ahem; line-height: 14px;">
<a href="www" id="a" style="color: green">Aaaaaaaaaa</a> <a href="www" id="b" style="color: red">unreachable</a>, <a href="www" id="c">cccccccc ccc ccccccc</a><br/>
blabla, <a href="www" id="d" style="color: purple">ddd ddd dddddd dddddd ddd ddd ddd</a> bla.
</div>

<p>Test 2 (the red and blue links intersect the purple link above):</p>

<div style="font: 16px Ahem; line-height: 14px;">
blabla, <a href="www" id="d2" style="color: purple">ddd ddd dddddd dddddd ddd ddd ddd</a> bla.
<a href="www" id="a2" style="color: green">Aaaaaaaaaa</a> <a href="www" id="b2" style="color: red">unreachable</a>, <a href="www" id="c2">cccccccc ccc ccccccc</a><br/>
</div>

<p><em>Manual test instruction: Ensure that all links are reachable.</em></p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "c"],
    ["Left", "b"],
    ["Left", "a"],
    ["Right", "b"],
    ["Right", "c"],
    ["Down", "d"],

    ["Down", "d2"],
    ["Down", "c2"],
    ["Left", "b2"],
    ["Left", "a2"],
    ["Right", "b2"],
    ["Right", "c2"],

    ["Up", "d2"],
    ["Up", "d"],
    ["Up", "c"],
  ];
  snav.assertFocusMoves(resultMap);
</script>
